<template>
    <div>
        <van-nav-bar title="添加收款账户" left-arrow @click-left="backUp"></van-nav-bar>
        <div class="register">
            <van-cell-group>
                <van-field
                        readonly
                        required
                        clickable
                        name="picker"
                        :value="value"
                        label="提现平台"
                        placeholder="请选择提现平台"
                        :aria-errormessage="errorMsg.platform"
                        @click="showPicker = true"
                />
                <van-popup v-model="showPicker" position="bottom">
                    <van-picker
                            show-toolbar
                            :columns="platform"
                            @confirm="onConfirm"
                            @cancel="showPicker = false"
                    />
                </van-popup>
                <van-field
                        required
                        type="text"
                        placeholder="请输入姓名"
                        label="姓名"
                        v-model="data.name"
                        :error-message="errorMsg.name"
                        clearable
                ></van-field>
                <van-field
                        required
                        type="text"
                        placeholder="银行卡号/支付宝/微信号"
                        label="账号"
                        v-model="data.account"
                        :error-message="errorMsg.account"
                        clearable
                ></van-field>
                <van-field
                        type="text"
                        placeholder="请输入开户银行名"
                        label="银行名称"
                        v-model="data.bankName"
                ></van-field>
            </van-cell-group>
            <div class="register-btn">
                <van-button block @click="reset">重置</van-button>
                <van-button block type="danger" @click.stop="submit">提交</van-button>
            </div>
        </div>
    </div>
</template>
<script>
    /* 修改部分 2020.0703 */
    import {Popup, Field, Icon, Button, Cell, CellGroup, NavBar, Toast, Picker , Notify} from "vant";
    import validator from "@/utils/validation.js";
    import api from "@/utils/restful.js";
    import axios from "axios";

    export default {
        name: "forget",
        components: {
            [Field.name]: Field,
            [Icon.name]: Icon,
            [Button.name]: Button,
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup,
            [NavBar.name]: NavBar,
            [Toast.name]: Toast,
            [Popup.name]: Popup,
            [Picker.name]: Picker,
            [Notify.name]: Notify
            /* 修改部分 2020.0703 */
        },
        data() {
            return {
                countdown: 0,
                value: '',
                platform: ['支付宝', '微信', '银行卡'],
                showPicker: false,
                tradePlatform: 0,
                data: {
                    name: "",
                    account: "",
                    bankName: "",
                },
                errorMsg: {
                    name: "",
                    account: "",
                    bankName: "",
                    platform: "",

                },
                rules: {
                    name: [{required: true, message: "请输入姓名"}],
                    account: [{required: true, message: "请输入银行卡账号"}],
                    platform: [{required: true, message: "请选择提现平台"}],
                }
            };
        },
        methods: {
            backUp() {
                this.$router.go(-1);
            },
            onConfirm(value) {
                this.value = value;
                this.showPicker = false;
                console.log(this.value);

            },
            submit() {
                /* 修改部分 2020.0703 */
                /* 判断是否选择提现平台 */
                if(!this.value) {
                    Notify({
                        type: 'danger',
                        message: '请选择提现平台',
                        duration: 1000
                    })
                    return false;
                }
                const instance = axios.create({});
                this.validate((errors, fields) => {
                    console.log(this.value);
                    if (this.value == '支付宝') {
                        this.tradePlatform = 1;
                    } else if (this.value == '微信') {
                        this.tradePlatform = 2;
                    } else if (this.value == '银行卡') {
                        this.tradePlatform = 3;
                    }
                    if (!errors) {
                        instance({
                            method: "post",
                            url: api.accountAdd,
                            data: this.$qs.stringify({
                                token: localStorage.getItem("token"),
                                name: this.data.name,
                                account: this.data.account,
                                bankName: this.data.bankName,
                                tradePlatform: this.tradePlatform,
                            })
                        }).then(res => {
                            console.log(res.data);
                            this.$toast(res.data.msg);
                            if (res.data.code == 200) {
                                setTimeout(() => {
                                    this.$router.go(-1);
                                }, 500);
                            }
                        });
                    }
                });
            },
            resetField(attrs) {
                attrs = !attrs
                    ? Object.keys(this.errorMsg)
                    : Array.isArray(attrs)
                        ? attrs
                        : [attrs];
                attrs.forEach(attr => {
                    this.errorMsg[attr] = "";
                });
            },

            validate(callback, data) {
                this.validator.validate((errors, fields) => {
                    this.resetField();
                    if (errors) {
                        fields.forEach(item => {
                            this.errorMsg[item.field] = item.message;
                        });
                    }
                    callback && callback(errors, fields);
                }, data);
            },

            reset() {
                this.data = {
                    name: "",
                    code: "",
                    mobile: "",
                    pwd: "",
                    password2: "",
                    address: "",
                    company: ""
                };
                this.validator.setData(this.data);
                this.resetField();
            }
        },
        created() {
            this.validator = validator(this.rules, this.data);
        }
    };
</script>
<style lang="less" scoped>
    @import "~style/common.less";

    .register {
        background-color: @borderColor;
        // background-color: #f00;

        // border: 1px solid red;
        height: calc(100vh - 1.3rem);

        .van-cell-group {
            padding: 0 20px;
        }
    }

    .register-btn {
        margin-top: 60px;
        display: flex;
        justify-content: space-around;

        button {
            height: 0.9rem;
            line-height: 0.9rem;
            flex-basis: 40%;
            padding: 0;
            border-radius: 20px;
        }

        button:first-child {
            transform: translateY(0);
        }
    }

    .mt10 {
        margin-top: 10px;
    }

    /deep/ .van-field__button {
        background-color: transparent;
        // border: 1Px solid @priColor;
        padding: 0;

        .van-button {
            border-radius: 16px;
        }
    }

    /deep/ .van-cell {
        .font-dpr(40px) !important;
    }
</style>
